<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>自定义表格</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="${base}/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
	href="${base}/css/jquery.searchableSelect.css">


<script type="text/javascript" src="${base}/js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="${base}/js/bootstrap.js"></script>
<script src="${base}/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript"
	src="${base}/js/jquery.searchableSelect.js"></script>
<style>
/*修改提示文字的颜色*/
	input::-webkit-input-placeholder { /* WebKit browsers */ 
	color: #FF6666; 
	font-size: 6px;
	} 
	input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
	color: #CCFFFF; 
	font-size: 8px;
	} 
	input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
	color: #CCFFFF; 
	font-size: 8px; 
	} 
	input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
	color: #CCFFFF; 
	font-size: 8px;
} 
</style>
<script>
		$(function(){
			
			$("#tableName").blur(function(){
				var tableName = $(this).val();
				
				if(tableName != ""){
					$.post("${ pageContext.request.contextPath }/table/checkTableName",{"tableName":tableName},function(data){
		 				if(data == 1){
		 					$("#s1").html("<font color='green'>该表格名可以使用</font>");
		 					$("#saveTable").attr("disabled",false);
		 				}else if(data == 2){
		 					$("#s1").html("<font color='red'>该表格名已经存在</font>");
		 					$("#saveTable").attr("disabled",true);
	 	 				}
	 	 			});
	 			}else{
	 				$("#s1").html("<font color='red'>表格名不能为空</font>");
	 				$("#saveTable").attr("disabled",true);
	 			}
				
				
	 		});
			
			$("#saveTable").mouseover(function(){
				
				if($("#tableName").val() == ""){
					$("#saveTable").attr("disabled",true);
					alert("请填写表格名称");
				}
			});
			
			
			
				
				$('#memberName123').searchableSelect();
				
				
				$("#selectAll").click(function(){
					
					$(":checkbox[name='ids']").prop("checked",this.checked);
				});

			
	 		
	 	});
			
</script>
</head>

<body>
	<!--整体div-->
	<div class="container">
		<jsp:include page="${path}/menu.jsp"></jsp:include>
		<div style="margin-left: 20px;margin-bottom: 10px; color: grey">当前位置：表格管理 > 自定义表格</div>
		
		<form id="allInput" <%-- action="${ pageContext.request.contextPath }/table/createTable2?projectId=${project.id}&userId=${user.id}" --%>
			method="post">
			<div class="form-group">
				<div class="col-sm-4">
					<input type="text" class="form-control" id="tableName"
						name="tableName" placeholder="请输入表格名称1">
				</div>
				<span id="s1"></span>
				<br>
			</div>
			<div style="padding-top: 20px">
			    
		    <input type="button" class="btn btn-primary" data-toggle="modal" style="margin-left: 20px" data-target="#myModal" value="设置下拉框"> 
		   
		    <!--  定义模态框触发器，此处为按钮触发  -->
				<!-- <a onclick="changey()"><input  type="button"
							class="btn btn-success" value="设置该列为下拉框"></a>
				
							<a onclick="tiaose()"><input  type="button"
							class="btn btn-success" value="请为该列下拉框配置颜色"></a> -->
			</div>
			<div style="margin-left: 20px;color: red">注：选中列名，单次此按钮可为选中列配置下拉框及颜色</div>
			<div class="container">
				<div style="overflow-x: scroll; width: 100%; white-space: nowrap;">
				
					
			
					<!-- alan_18.3.2_start_update_style -->
					<!-- <table class="table table-condensed table table-bordered" -->
					<table class="table table-striped table-bordered table-hover dataTables-example"
						style="width: 100%; table-layout: fixed; margin-top: 50px; overflow: auto"
						align="center" id="table" border="1">
						<tdead>
							<tr id="tr1" style="height: 30px;" >
							<c:set var="a" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
								<td class="td" style="width: 120px; height: auto;"><input <%-- value="${a }" --%>
									name="colName${a}" type="text " placeholder="请输入列名" class="tr1-td"
									style="border: none; height: 35px; font-size: 10px; width: 100%; word-wrap: break-word;"></td>
								
								<c:set var="a" value="${a+1 }"></c:set>
							 	
							</c:forEach>	
							
							</tr>
						</thead>
						<tbody>
					
						<c:forEach begin="1" end="4" step="1" varStatus="status">
						<c:if test="${status.index == 1 }">
						
						
							<tr id="tr2" style="height: 30px;">
							<c:set var="b" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
							
							
									<td class="colName${b}first">
									<input  class="editor${status.index} colEditor${b}" type="text" style="border: none; height: 35px; font-size: 10px; width: 100%; word-wrap: break-word;">
									<input type="hidden" name="colType${b }" value="0"/>
									<input type="hidden" name="defVal${b }" id="defVal${b }" value=""/>
									<input  type="hidden" id="editor${status.index}" value=""></input>
									<input  type="hidden" id="colEditor${b}" value=""></input>
									</td>
									 <c:set var="b" value="${b+1 }"></c:set>
							
								
								
								</c:forEach>
								</tr>
								</c:if>
								
								<c:if test="${status.index != 1 }">
										
						
						
							<tr class="tr3" style="height: 30px;">
							<c:set var="aa" value="1"></c:set>
							<c:forEach begin="1" end="6" step="1" >
							
							
							
								
								<td class="colName${aa}">
								<input  class="editor${status.index} colEditor${aa}" type="text" style="border: none; height: 35px; font-size: 10px; width: 100%; word-wrap: break-word;">
								<input  type="hidden" id="editor${status.index}" value=""></input>
								<input  type="hidden" id="colEditor${aa}" value=""></input>
								</td>
								 <c:set var="aa" value="${aa+1 }"></c:set>
								
								</c:forEach>
								</tr>
							
								
								
								 </c:if>
								</c:forEach>
								
							
						</tbody>
					</table>
					<!-- alan_18.3.2_end_update_style -->
				</div>
				<input  type="hidden"  id="totalNumber" name="totalNumber"  value="6"/>
				<input  type="hidden"  id="rowNum" name="rowNum"  value=""/>
				<p style="color: red;">注：请单击列名或行为该列或改行配置编辑人</p>
				<!-- <button type="button" class="btn btn-primary"
				onclick="AddRow(document.getElementById('table'),1)">增加一行</button> -->
				
				<button type="button" class="btn btn-primary"
					onclick="editor()">指定行编辑人</button>
				<button type="button" class="btn btn-primary"
					onclick="colEditor()">指定列编辑人</button>
				<button type="button" class="btn btn-primary"
					onclick="addCell(id++)">增加一列</button>
				<input id="saveTable" type="button" onclick="allInfo()" class="btn btn-primary" value="保存表格">
				 
			</div>
		</form>
			<div class="container">
   


    <form method="post"  class="form-horizontal" role="form"
							id="myForm" action="#" >
							<div class="modal fade" id="myModal" role="dialog" tabindex=-1
								aria-labelledby="myModalLabel" aria-hidden="true">
								<!--  定义模态框，过渡效果为淡入，id为myModal,tabindex=-1可以禁用使用tab切换，aria-labelledby用于引用模态框的标题，aria-hidden=true保持模态框在触发前窗口不可见  -->
								<div class="modal-dialog" style="width: 500px">
									<!--  显示模态框对话框模型（若不写下一个div则没有颜色）  -->
									<div class="modal-content">
										<!--  显示模态框白色背景，所有内容都写在这个div里面  -->

										<div class="btn-info modal-header">
											<!--  模态框标题  -->
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<!--  关闭按钮  -->
											<h4>设置下拉框</h4>
											<!--  标题内容  -->
										</div>

										<div class="modal-body">
											<!--  模态框内容，我在此处添加一个表单 -->
											<form class="form-horizontal" id="form2" role="form">
											<div id="setSelect">
												<div class="form-group">
					                                <label for="uname" class="col-sm-2 control-label">选项1</label>
					                                <div class="col-sm-5">
					                                    <input type="text" id="value1"  class="form-control well" placeholder="请输入..."/>
					                             </div>
					                            <span><input type="button" id="color1" onclick="tiaose1(this)" ></span>
					                            </div>
					                            <div class="form-group">
					                                <label for="upwd" class="col-sm-2 control-label">选项2</label>
					                                <div class="col-sm-5">
					                                    <input type="text" id="value2"  class="form-control well" placeholder="请输入..."/>
					                                </div>
					                                 <span><input type="button" id="color2" onclick="tiaose1(this)" ></span>
					                            </div>

												</div>
											</form>
											<div class="form-group">
					                                <label for="upwd" class="col-sm-3 control-label">增减选项</label>
					                               <div class="col-sm-8">
					                                    <input type="button" class="btn btn-primary" onclick="add(id)"
															style="width: 60px"  value="+"/>
					                                    <input type="button" class="btn btn-primary" onclick="deleteChild()"
															style="width: 60px"  value="-"/>
					                                </div>
					                            </div>
										</div>

										<div class="modal-footer">
											<!--  模态框底部样式，一般是提交或者确定按钮 -->
											<input type="button"   data-dismiss="modal"  class="btn btn-info" onclick="setSelect()"  value="确定">
											<button type="button" class="btn btn-default"
												data-dismiss="modal">取消</button>
										</div>

									</div>
									<!-- /.modal-content -->
								</div>
							</div>
							<!-- /.modal -->
						</form>
		</div>
	</div>
	
	
	
</body>
<script type="text/javascript">


		var toNumber = $("#totalNumber").val();
		var totalNumber = parseInt(toNumber);
		
		
		
		$("#rowNum").val(table.rows.length-1);
		
		var el = window.document.body;//声明一个变量，默认值为body
		var colObj=null;
		window.document.body.onclick = function(event){
			
			
			  el = event.target;//鼠标每经过一个元素，就把该元素赋值给变量el
			
			  console.log('当前鼠标在', el, '元素上');//在控制台中打印该变量
			
			if(event.target.className == "tr1-td"){
				colObj = event.target;
				
			}
		}	 
	
		
/* 
		function setEditor(){
			
			alert($("#memberName123").val());
			var editor = $("#memberName123").val();
			var editorClass = $(el).attr("class"); 
			alert($(el).attr("class"));
			$(el).attr("readonly",'readonly');
			$(el).attr("edirot",editor);
			$("#"+editorClass).val(editor);
			
			alert(11);
			
			
		  } */
		  var selector = 3;
		  function deleteChild() {
			  
			  $("#setSelect")[0].removeChild(document.getElementById("setSelect").lastChild);
			  selector = selector - 1;
		  }
		  function add(a) {
			  
				id = a + selector;
			
				$("#setSelect")
				
						.append(
								'<div class="form-group"><label for="select'+id+'" class="col-sm-2 control-label">选项'
										+ id
										+ '</label><div class="col-sm-5">'
										+ '<input type="text" id="value'+id+'"  class="form-control well" placeholder="请输入..."/>'
										+ '</div><span><input type="button" id="color'+id+'" onclick="tiaose1(this)" ></span></div>');
		  selector = selector + 1;
		  }
		
		function setSelect(){
			
			
			var obj = $(colObj);
			
			
			var name = obj.attr("name");
			var number = $("#setSelect").children().length;
			var defVal = "";
			
			var a = [];
			for(var i = 1;i<=number;i++){
				a[i-1] = 	$("#value"+i).val();
				if(i<number){
				
				defVal += $("#value"+i).val()+$("#color"+i).attr("background-color")+"||";
				}else{
					defVal += $("#value"+i).val()+$("#color"+i).attr("background-color");	
				}
			}
				var defColor = $("#color1").attr("background-color");

			       $("."+name).html("");
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       var str1 = '<select  id="'+name+'" style="width: 100%; height: 30px;background-color:'+ defColor+'">';
			       var str2 = '<select  id="'+name+'" style="width: 100%; height: 30px;background-color:'+ defColor+'">';
			       
			       for(var j = 0;j<a.length;j++ ){
			    	   str1 += '<option  value="'+a[j]+'">'+a[j]+'</option>';
			    	   str2 += '<option  value="'+a[j]+'">'+a[j]+'</option>';
			       }
			       
			       str1 += '</select>';
			       str2 += '<input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>';
			       $("."+name).append(str1);
			       $("."+name+"first").append(str2);
			       
			       /* $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+a[0]+'">'+a[0]+'</option><option value="'+a[1]+'">'+a[1]+'</option></select>');
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+a[0]+'">'+a[0]+'</option><option value="'+a[1]+'">'+a[1]+'</option><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     */
			 $("#defVal"+num).val(defVal);
			     
			    
			     
			 $("#myForm").get(0).reset();
			
		  }
		
		
		function allInfo(){
			
			var map = {};

			var rows = table.rows.length;
			
			var cells = table.rows.item(0).cells.length;
			
			for (var i = 0; i < rows; i++) {
				var cellValue = [];
				for (var j = 0; j < cells; j++) {
					
					var valuej = table.rows.item(i).cells.item(j);
					/* alert(valuej.childNodes[1].value); */
					if($(valuej.childNodes[0]) == null){
						
					cellValue[j] = $(valuej.childNodes[1]).val();
					}else{
						cellValue[j] = $(valuej.childNodes[0]).val();
					}
					 
				}
				
				map[i.toString()] = cellValue;
			}
			var json = JSON.stringify(map);
			var params = JSON.stringify(json);
			
			
			var tableName = $("#tableName").val();
			
			var lll="${ pageContext.request.contextPath }/excel/save";
			
		
			
			   var userId = ${user.id};
			   /*  alert(tableName);   */
			  /*  alert("tableName="+tableName+",tableId="+tableId+",userId="+userId); */
			console.log("tableName="+tableName+",userId="+userId);
		  $.ajax({
				url : lll,
				data : {
					"json" : params,
					"tableName" : tableName
				},
				type : "POST",
				success : function() {
					
				},
				async : true,
				cache : false
			});
			var projectId = ${project.id};
			$.ajax({  
		        type: "POST",  
		        url:"${ pageContext.request.contextPath }/table/createTable2?projectId=${project.id}&userId=${user.id}",  
		        data:$('#allInput').serialize(),// 序列化表单值  
		        dataType: "json",
		        success: function (data) {
		           
		            window.location.href="${ pageContext.request.contextPath }/excel/editTable?tableName="+tableName+"&tableId="+data+"&userId="+userId+"&projectId="+projectId;
				},
				async: true,
				cache: false
				}); 
			

			
		  }

		function editor(){
			
			
			  if("INPUT" == el.tagName){
				var className = $(el).attr("class");
				var name = className.substring(0,7);
				var projectId = ${project.id};
				data=name;
			    layer.open({
			      type: 2,
			      title: '选择该行责任人',
			      maxmin: true,
			      shadeClose: true, //点击遮罩关闭层
			      area : ['600px','550px'],
			      maxmin: true,
			      content: '${basePath}table/SetEditor?projectId='+projectId
			    
			      
			    });
			}else{
				alert("请确认选中表格的一行");
			}  
			
		  } 
		
		function colEditor(){
			
			
			  if("INPUT" == el.tagName){
					var name = $(el).attr("name");
					 var num =  name.substring(7,name.length);
					var projectId = ${project.id};
					data=num;
				    layer.open({
				      type: 2,
				      title: '选择该行责任人',
				      maxmin: true,
				      shadeClose: true, //点击遮罩关闭层
				      area : ['600px','550px'],
				      maxmin: true,
				      content: '${basePath}table/setColEditor?projectId='+projectId
				    
				      
				    });
			}else{
				alert("请确认选中表格的一行");
			}  
			
		  } 
		function tiaose(){
			 if("INPUT" == el.tagName){
				var name = $(el).attr("name");
			
				var ip="defVal"+(parseInt($(el).parent().index())+1);
				
				
				data=name+","+ip;
			    layer.open({
			      type: 2,
			      title: '下拉框颜色选配',
			      maxmin: true,
			      shadeClose: true, //点击遮罩关闭层
			      area : ['600px' , '850px'],
			      content: 'http://127.0.0.1:8082/Excel/index3333.html'
			    
			    });
			 }else{
					alert("请确认选中表头");
			} 
		  }
		
		function tiaose1(obj){
			 
				
				data=obj;
				
			    layer.open({
			      type: 2,
			      title: '下拉框颜色选配',
			      maxmin: true,
			      shadeClose: true, //点击遮罩关闭层
			      area : ['600px' , '850px'],
			      content: 'http://127.0.0.1:8080/Excel/index-color.html'
			    
			    });
			 
		  }
		
		  
		  
		function ceshi(){
			
			
		
			 layer.open({
			      type: 1,
			      area: ['600px', '300px'],
			      shadeClose: true, //点击遮罩关闭
			      /* content: '\<\div style="padding:20px;">自定义内容\<\/div>', */
			      content: '<label for="memberName" class="col-sm-2 control-label">成员姓名:</label>'+
			      '<div class="col-sm-6"><select  id="memberName12" name="memberName">'+
			      '<option value="">请选择或者输入成员姓名</option><c:forEach items="${users}" var="user"><option value="${user.name }">${user.name }</option></c:forEach></select></div>'
			    }); 
			 $('#memberName12').searchableSelect();
		  };
		  
		 
		  
		function changey(){
			
			 if("INPUT" == el.tagName){
			var name = $(el).attr("name");
		
			
			var num=prompt("请输入下拉框有几个值","2");  
			if(num == 2){
				
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");

			       $("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/></select><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
				/* var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");

				 
			       var fu = $("."+name);
			      
			       for(var j=0;j<fu.length;j++){
			    	   var bb = $("."+name)[j];
				       var zi = bb.children;
				       bb.removeChild(zi[0]);
			       }
				       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select>');
			       
			      var num =  name.substring(7,name.length);
			     
			       
			       var fu1 = $("."+name+"first")[0];
			     
			       var zi1 = fu1.children;
			       
			       var count=zi1.length-1;
			       for(var i=0;i<count;i++){
			    	   fu1.removeChild(fu1.children[0]);
			    	  
			       }
			       
			       
			      $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			   */   
			}else if(num == 3){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");
				var val3=prompt("请输入下拉框第三个值","");
				$("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
				
			
			}else if(num == 4){
				var val1=prompt("请输入下拉框第一个值","");  
				var val2=prompt("请输入下拉框第二个值","");
				var val3=prompt("请输入下拉框第三个值","");
				var val4=prompt("请输入下拉框第四个值","");
				$("."+name).html("");
			       $("."+name).append('<select  id="'+name+'" style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option><option value="'+val4+'">'+val4+'</option></select>');
			      var num =  name.substring(7,name.length);
			       $("."+name+"first").html("");
			       $("."+name+"first").append('<select  id="'+name+'"  style="width: 100px; height: 25px;"><option  value="'+val1+'">'+val1+'</option><option value="'+val2+'">'+val2+'</option><option value="'+val3+'">'+val3+'</option><option value="'+val4+'">'+val4+'</option></select><input type="hidden" name="defVal'+num+'" id="defVal'+num+'" value=""/><input type="hidden" name="colType'+num+'" name="colType'+num+'" value="1"/>');
			     
			}
			
			 }else{
					alert("请确认选中表头");
			} 
			
			
		  }

	  
	  
	//需要设置一个隐藏input ，表示列数，每增加一列改变value
	function addCell(id) {
		var toNumber = $("#totalNumber").val();
		var totalNumber = parseInt(toNumber);
		
		id = id + 7;
		
		$("#tr1")
				.append(
						'<td style="width: 120px;height:auto; " class="td"><input name="colName'+id+'" type="text " placeholder="请输入列名" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>');

		
		$("#tr2")
				.append(
						'<td class="colName'+id+'first"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;">'
						+'<input type="hidden" name="colType'+id+'" value="0"/>'
						+'<input type="hidden" name="defVal'+id+'" id="defVal'+id+'" value=""/></td>');
		
		$(".tr3")
				.append(
						'<td class="colName'+id+'"><input type="text" style="border: none; height: 35px; font-size: 10px; width: 100px; word-wrap: break-word;"></td>');
		
		
		
		$("#totalNumber").val(totalNumber+1);
		
	}
	function addRow() {
		var tr = document.createElement('tr');
		tr.className = "tr";
		var tbody = document.getElementById("tbody");
		var rows = table.rows.length;
		var cells = table.rows.item(0).cells.length;
		tbody.appendChild(tr);
		for (var i = 0; i < cells; i++) {
			var inputi = document.createElement('input');
			inputi.style.border = "none";
			inputi.style.height = "46px";
			inputi.style.font.size = "10px";
			var tdi = document.createElement('td');
			tdi.appendChild(inputi);
			tdi.className = "td";
			tdi.style.height = "46px";
			tdi.style.width = " 5%";
			tr.appendChild(tdi);
		}
	}

	/* $(".trr").bind("mouseover", function() {
		$(this).css("background-color", "#eeeeee");
	})
	$(".trr").bind("mouseout", function() {
		$(this).css("background-color", "#ffffff");
	}) */
</script>
</html>


